<template>
  <div class="min-h-screen bg-gray-900">
    <!-- 顶部导航 -->
    <nav class="h-16 bg-black bg-opacity-80 backdrop-blur-md fixed w-full z-50 flex items-center justify-between px-8">
      <div class="flex items-center gap-6">
        <!-- EduLiveLink Logo -->
        <div class="flex items-center gap-3 bg-slate-800 px-4 py-2 rounded-lg">
          <div class="logo-icon w-8 h-8">
            <svg viewBox="0 0 100 100" fill="none">
              <circle cx="50" cy="50" r="45" stroke="url(#gradient1)" stroke-width="3" fill="none"/>
              <circle cx="50" cy="50" r="35" stroke="url(#gradient2)" stroke-width="2" fill="none"/>
              <path d="M30 40 L50 30 L70 40 L70 60 L50 70 L30 60 Z" fill="url(#gradient3)" opacity="0.8"/>
              <circle cx="50" cy="50" r="8" fill="white"/>
              <defs>
                <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#4A90E2"/>
                  <stop offset="100%" style="stop-color:#7BB3F0"/>
                </linearGradient>
                <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#5BA0F2"/>
                  <stop offset="100%" style="stop-color:#8CC8FF"/>
                </linearGradient>
                <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#4A90E2"/>
                  <stop offset="100%" style="stop-color:#6BB0FF"/>
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div class="flex flex-col">
            <span class="text-sm font-bold text-blue-400">EduLiveLink教师端</span>
            <span class="text-xs text-gray-300">智能教育平台</span>
          </div>
        </div>
        
        <!-- 直播信息 -->
        <div class="flex items-center gap-4 text-white">
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
            <span class="text-sm font-medium">直播中</span>
          </div>
          <div class="text-sm text-gray-300">{{ liveRoom.title }}</div>
          <div class="text-sm text-gray-400">观看: {{ liveRoom.viewers }}人</div>
        </div>
      </div>
      
      <div class="flex items-center gap-4">
        <div class="text-sm text-gray-300">{{ formatTime(liveTime) }}</div>
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center cursor-pointer hover:bg-blue-200 transition-colors">
            <el-icon class="text-blue-600 text-sm">
              <User />
            </el-icon>
          </div>
          <el-button size="small" class="rounded text-blue-400 border-blue-400 hover:bg-blue-400 hover:text-white" @click="goToProfile">我的</el-button>
        </div>
        <el-button size="small" class="rounded" @click="exitLive">退出直播</el-button>
      </div>
    </nav>

    <!-- 主体内容 -->
    <div class="pt-16 flex h-screen">
      <!-- 左侧主播区域 -->
      <div class="flex-1 relative bg-black">
        <!-- 主视频区域 -->
        <div class="w-full h-full relative overflow-hidden">
          <!-- 视频背景 -->
          <div class="w-full h-full bg-gradient-to-br from-blue-900 to-purple-900 flex items-center justify-center">
            <div class="text-center text-white">
              <div class="w-48 h-48 bg-white bg-opacity-10 rounded-full mx-auto mb-6 flex items-center justify-center backdrop-blur-sm">
                <span class="text-8xl opacity-60">👨‍🏫</span>
              </div>
              <h2 class="text-3xl font-bold mb-2">{{ liveRoom.instructor }}</h2>
              <p class="text-xl text-blue-200">{{ liveRoom.subject }}</p>
            </div>
          </div>

          <!-- 弹幕层 -->
          <div class="absolute inset-0 pointer-events-none overflow-hidden">
            <div 
              v-for="danmaku in activeDanmakus" 
              :key="danmaku.id"
              :class="['absolute text-white text-lg font-medium px-2 py-1 rounded bg-black bg-opacity-50 whitespace-nowrap animate-danmaku']"
              :style="{ 
                top: danmaku.top + '%', 
                right: danmaku.right + 'px',
                animationDuration: danmaku.duration + 's',
                color: danmaku.color 
              }"
            >
              <span class="text-sm text-gray-300 mr-2">{{ danmaku.username }}:</span>
              {{ danmaku.content }}
            </div>
          </div>

          <!-- 签到弹窗 -->
          <div v-if="showCheckIn" class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center z-30">
            <div class="bg-white rounded-2xl p-8 max-w-md mx-4">
              <div class="text-center mb-6">
                <div class="w-20 h-20 bg-blue-100 rounded-full mx-auto mb-4 flex items-center justify-center">
                  <span class="text-3xl">📷</span>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 mb-2">摄像头签到</h3>
                <p class="text-gray-600">请开启摄像头完成签到验证</p>
              </div>
              
              <div class="mb-6">
                <div class="w-64 h-48 bg-gray-200 rounded-lg mx-auto flex items-center justify-center">
                  <div v-if="!cameraEnabled" class="text-center text-gray-500">
                    <span class="text-4xl mb-2 block">📹</span>
                    <p>摄像头未开启</p>
                  </div>
                  <div v-else class="w-full h-full bg-gradient-to-br from-green-400 to-blue-500 rounded-lg flex items-center justify-center">
                    <span class="text-white text-6xl">👤</span>
                  </div>
                </div>
              </div>
              
              <div class="flex gap-3">
                <el-button 
                  :type="cameraEnabled ? 'success' : 'primary'" 
                  class="flex-1 rounded-lg py-3"
                  @click="toggleCamera"
                >
                  {{ cameraEnabled ? '✅ 摄像头已开启' : '📷 开启摄像头' }}
                </el-button>
                <el-button 
                  v-if="cameraEnabled"
                  type="primary" 
                  class="flex-1 rounded-lg py-3"
                  @click="completeCheckIn"
                >
                  完成签到
                </el-button>
              </div>
              
              <div class="mt-4 text-center">
                <el-button type="text" size="small" @click="skipCheckIn">
                  跳过签到
                </el-button>
              </div>
            </div>
          </div>

          <!-- 底部控制栏 -->
          <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2">
            <div class="flex items-center gap-4 bg-black bg-opacity-70 backdrop-blur-md px-8 py-4 rounded-full">
              <el-button 
                :type="audioEnabled ? 'success' : 'danger'"
                circle 
                size="large"
                @click="toggleAudio"
                class="w-14 h-14"
              >
                <span class="text-xl">{{ audioEnabled ? '🎤' : '🔇' }}</span>
              </el-button>
              
              <el-button 
                :type="videoEnabled ? 'success' : 'danger'"
                circle 
                size="large"
                @click="toggleVideo"
                class="w-14 h-14"
              >
                <span class="text-xl">{{ videoEnabled ? '📹' : '📵' }}</span>
              </el-button>
              
              <el-button 
                type="info"
                circle 
                size="large"
                @click="toggleHandUp"
                class="w-14 h-14"
                :class="{ 'bg-yellow-500 border-yellow-500': handRaised }"
              >
                <span class="text-xl">{{ handRaised ? '✋' : '🙋' }}</span>
              </el-button>
              
              <el-button 
                type="primary"
                circle 
                size="large"
                @click="showCheckIn = true"
                class="w-14 h-14"
              >
                <span class="text-xl">📷</span>
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧功能面板 -->
      <div class="w-96 bg-white flex flex-col shadow-2xl">
        <!-- 功能标签页 -->
        <div class="flex border-b border-gray-200 bg-gray-50">
          <button 
            v-for="tab in tabs"
            :key="tab.key"
            :class="['flex-1 py-4 px-4 text-sm font-medium border-b-2 transition-colors flex items-center justify-center gap-2', 
                     activeTab === tab.key 
                     ? 'text-blue-600 border-blue-600 bg-white' 
                     : 'text-gray-500 border-transparent hover:text-gray-700 hover:bg-gray-100']"
            @click="activeTab = tab.key"
          >
            <span>{{ tab.icon }}</span>
            {{ tab.name }}
            <span v-if="tab.count" class="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">{{ tab.count }}</span>
          </button>
        </div>

        <!-- 弹幕区域 -->
        <div v-if="activeTab === 'danmaku'" class="flex-1 flex flex-col">
          <!-- 弹幕设置 -->
          <div class="p-4 border-b border-gray-200 bg-gray-50">
            <div class="flex items-center justify-between mb-3">
              <span class="text-sm font-medium text-gray-700">弹幕设置</span>
              <el-switch v-model="danmakuEnabled" size="small" />
            </div>
            <div class="flex items-center gap-2">
              <span class="text-xs text-gray-600">颜色:</span>
              <div class="flex gap-1">
                <div 
                  v-for="color in danmakuColors"
                  :key="color"
                  :class="['w-6 h-6 rounded cursor-pointer border-2', selectedDanmakuColor === color ? 'border-gray-400' : 'border-gray-200']"
                  :style="{ backgroundColor: color }"
                  @click="selectedDanmakuColor = color"
                ></div>
              </div>
            </div>
          </div>

          <!-- 弹幕列表 -->
          <div class="flex-1 overflow-y-auto p-4 space-y-3">
            <div 
              v-for="danmaku in danmakuHistory" 
              :key="danmaku.id"
              class="flex items-start gap-3 p-3 hover:bg-gray-50 rounded-lg"
            >
              <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                <span class="text-xs">👤</span>
              </div>
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 mb-1">
                  <span class="text-sm font-medium text-gray-900">{{ danmaku.username }}</span>
                  <span class="text-xs text-gray-500">{{ formatMessageTime(danmaku.time) }}</span>
                </div>
                <p class="text-sm text-gray-700 break-words" :style="{ color: danmaku.color }">
                  {{ danmaku.content }}
                </p>
              </div>
            </div>
          </div>

          <!-- 弹幕输入 -->
          <div class="p-4 border-t border-gray-200 bg-gray-50">
            <div class="flex gap-2">
              <el-input
                v-model="newDanmaku"
                placeholder="发送弹幕..."
                size="default"
                @keyup.enter="sendDanmaku"
                class="flex-1"
              />
              <el-button 
                type="primary" 
                size="default" 
                @click="sendDanmaku"
                :disabled="!newDanmaku.trim()"
                class="rounded"
              >
                发送
              </el-button>
            </div>
          </div>
        </div>

        <!-- AI助教 -->
        <div v-if="activeTab === 'ai'" class="flex-1 flex flex-col">
          <!-- AI助教头部 -->
          <div class="p-4 border-b border-gray-200 bg-gradient-to-r from-purple-50 to-blue-50">
            <div class="flex items-center gap-3">
              <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center">
                <span class="text-white text-xl">🤖</span>
              </div>
              <div>
                <h3 class="font-semibold text-gray-900">AI智能助教</h3>
                <p class="text-sm text-gray-600">随时为您答疑解惑</p>
              </div>
              <div class="ml-auto">
                <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
              </div>
            </div>
          </div>

          <!-- AI对话区域 -->
          <div class="flex-1 overflow-y-auto p-4 space-y-4">
            <div 
              v-for="message in aiMessages" 
              :key="message.id"
              :class="['flex gap-3', message.sender === 'user' ? 'flex-row-reverse' : '']"
            >
              <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
                   :class="message.sender === 'user' ? 'bg-blue-100' : 'bg-purple-100'">
                <span class="text-xs">{{ message.sender === 'user' ? '👤' : '🤖' }}</span>
              </div>
              <div :class="['max-w-xs rounded-lg p-3', 
                           message.sender === 'user' 
                           ? 'bg-blue-500 text-white' 
                           : 'bg-gray-100 text-gray-900']">
                <p class="text-sm">{{ message.content }}</p>
                <span class="text-xs opacity-70 mt-1 block">
                  {{ formatMessageTime(message.time) }}
                </span>
              </div>
            </div>
          </div>

          <!-- AI输入区域 -->
          <div class="p-4 border-t border-gray-200">
            <div class="mb-3">
              <div class="flex flex-wrap gap-2">
                <el-button 
                  v-for="suggestion in aiSuggestions"
                  :key="suggestion"
                  size="small"
                  class="rounded-full text-xs"
                  @click="sendAIMessage(suggestion)"
                >
                  {{ suggestion }}
                </el-button>
              </div>
            </div>
            <div class="flex gap-2">
              <el-input
                v-model="newAIMessage"
                placeholder="向AI助教提问..."
                size="default"
                @keyup.enter="sendAIMessage(newAIMessage)"
                class="flex-1"
              />
              <el-button 
                type="primary" 
                size="default" 
                @click="sendAIMessage(newAIMessage)"
                :disabled="!newAIMessage.trim()"
                class="rounded"
              >
                提问
              </el-button>
            </div>
          </div>
        </div>

        <!-- 学员列表 -->
        <div v-if="activeTab === 'students'" class="flex-1 overflow-y-auto">
          <div class="p-4">
            <div class="flex items-center justify-between mb-4">
              <span class="text-sm font-medium text-gray-700">在线学员 ({{ students.length }})</span>
              <div class="flex gap-2">
                <el-button size="small" @click="muteAll">全员静音</el-button>
                <el-button size="small" type="primary" @click="inviteSpeak">邀请发言</el-button>
              </div>
            </div>
            
            <div class="space-y-2">
              <div 
                v-for="student in students" 
                :key="student.id"
                class="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg"
              >
                <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center">
                  <span class="text-white text-sm">{{ student.name.charAt(0) }}</span>
                </div>
                <div class="flex-1">
                  <div class="flex items-center gap-2">
                    <span class="text-sm font-medium text-gray-900">{{ student.name }}</span>
                    <span v-if="student.isVip" class="text-xs bg-yellow-100 text-yellow-600 px-2 py-0.5 rounded">VIP</span>
                    <span v-if="student.handRaised" class="text-xs">✋</span>
                  </div>
                  <div class="text-xs text-gray-500 flex items-center gap-2">
                    <span>{{ student.joinTime }}</span>
                    <span v-if="!student.audioEnabled" class="text-red-500">🔇</span>
                    <span v-if="!student.videoEnabled" class="text-red-500">📵</span>
                  </div>
                </div>
                <div class="flex gap-1">
                  <el-button size="small" circle @click="privateChat(student)">💬</el-button>
                  <el-button size="small" circle @click="kickStudent(student)">❌</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User } from '@element-plus/icons-vue'

const router = useRouter()

// 直播间信息
const liveRoom = ref({
  title: '人工智能基础课程',
  instructor: '李教授',
  subject: '深度学习原理与实践',
  viewers: 1247
})

const liveTime = ref(0)
const activeTab = ref('danmaku')

// 功能标签页
const tabs = ref([
  { key: 'danmaku', name: '弹幕', icon: '💬', count: null },
  { key: 'ai', name: 'AI助教', icon: '🤖', count: null },
  { key: 'students', name: '学员', icon: '👥', count: 1247 }
])

// 控制状态
const audioEnabled = ref(false)
const videoEnabled = ref(false)
const handRaised = ref(false)
const cameraEnabled = ref(false)
const showCheckIn = ref(true)

// 弹幕系统
const danmakuEnabled = ref(true)
const newDanmaku = ref('')
const selectedDanmakuColor = ref('#FFFFFF')
const danmakuColors = ref(['#FFFFFF', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8'])
const danmakuHistory = ref([])
const activeDanmakus = ref([])

// AI助教
const newAIMessage = ref('')
const aiMessages = ref([
  {
    id: 1,
    sender: 'ai',
    content: '欢迎来到人工智能基础课程！我是您的AI助教，有任何问题都可以向我提问。',
    time: new Date(Date.now() - 60000)
  }
])

const aiSuggestions = ref([
  '什么是深度学习？',
  '神经网络的原理',
  '如何开始学习AI？',
  '课程资料在哪里？'
])

// 学员列表
const students = ref([
  { id: 1, name: '张同学', joinTime: '14:30', audioEnabled: true, videoEnabled: true, handRaised: false, isVip: true },
  { id: 2, name: '李同学', joinTime: '14:25', audioEnabled: false, videoEnabled: true, handRaised: true, isVip: false },
  { id: 3, name: '王同学', joinTime: '14:35', audioEnabled: true, videoEnabled: false, handRaised: false, isVip: false },
  { id: 4, name: '刘同学', joinTime: '14:20', audioEnabled: true, videoEnabled: true, handRaised: false, isVip: true },
  { id: 5, name: '陈同学', joinTime: '14:40', audioEnabled: false, videoEnabled: false, handRaised: true, isVip: false }
])

// 定时器
let liveTimer = null
let danmakuTimer = null

// 方法
const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

const formatMessageTime = (time) => {
  return time.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
}

const toggleAudio = () => {
  audioEnabled.value = !audioEnabled.value
  ElMessage.success(audioEnabled.value ? '麦克风已开启' : '麦克风已关闭')
}

const toggleVideo = () => {
  videoEnabled.value = !videoEnabled.value
  ElMessage.success(videoEnabled.value ? '摄像头已开启' : '摄像头已关闭')
}

const toggleHandUp = () => {
  handRaised.value = !handRaised.value
  ElMessage.info(handRaised.value ? '已举手发言' : '已取消举手')
}

const toggleCamera = () => {
  cameraEnabled.value = !cameraEnabled.value
  ElMessage.success(cameraEnabled.value ? '摄像头已开启' : '摄像头已关闭')
}

const completeCheckIn = () => {
  showCheckIn.value = false
  ElMessage.success('签到成功！')
}

const skipCheckIn = () => {
  showCheckIn.value = false
  ElMessage.info('已跳过签到')
}

const exitLive = () => {
  ElMessageBox.confirm('确定要退出直播吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    router.push('/home')
  }).catch(() => {})
}

const goToProfile = () => {
  router.push('/profile')
}

// 弹幕相关方法
const sendDanmaku = () => {
  if (!newDanmaku.value.trim()) return
  
  const danmaku = {
    id: Date.now(),
    username: '我',
    content: newDanmaku.value,
    color: selectedDanmakuColor.value,
    time: new Date(),
    top: Math.random() * 70 + 10, // 10% - 80%
    right: -500,
    duration: 8 + Math.random() * 4 // 8-12秒
  }
  
  // 添加到历史记录
  danmakuHistory.value.unshift(danmaku)
  
  // 添加到活动弹幕
  if (danmakuEnabled.value) {
    activeDanmakus.value.push(danmaku)
    
    // 8-12秒后移除
    setTimeout(() => {
      const index = activeDanmakus.value.findIndex(d => d.id === danmaku.id)
      if (index > -1) {
        activeDanmakus.value.splice(index, 1)
      }
    }, danmaku.duration * 1000)
  }
  
  newDanmaku.value = ''
  ElMessage.success('弹幕发送成功！')
}

// AI助教相关方法
const sendAIMessage = (message) => {
  if (!message || !message.trim()) return
  
  // 添加用户消息
  const userMessage = {
    id: Date.now(),
    sender: 'user',
    content: message,
    time: new Date()
  }
  aiMessages.value.push(userMessage)
  
  // 模拟AI回复
  setTimeout(() => {
    const aiResponse = getAIResponse(message)
    const aiMessage = {
      id: Date.now() + 1,
      sender: 'ai',
      content: aiResponse,
      time: new Date()
    }
    aiMessages.value.push(aiMessage)
  }, 1000)
  
  newAIMessage.value = ''
}

const getAIResponse = (question) => {
  const responses = {
    '什么是深度学习？': '深度学习是机器学习的一个子集，它使用多层神经网络来学习数据的复杂模式。通过模拟人脑神经元的工作方式，深度学习可以自动提取特征并进行预测。',
    '神经网络的原理': '神经网络是由大量相互连接的节点（神经元）组成的计算模型。每个连接都有权重，通过调整这些权重来学习数据中的模式。',
    '如何开始学习AI？': '建议先学习Python编程基础，然后学习数学基础（线性代数、概率论），接着可以学习机器学习基础，最后深入深度学习框架如TensorFlow或PyTorch。',
    '课程资料在哪里？': '课程资料已上传到平台资源库，您可以在课程页面的"资料下载"区域找到所有相关文档、代码示例和练习题。'
  }
  
  // 检查是否有匹配的预设回复
  for (const [key, value] of Object.entries(responses)) {
    if (question.includes(key.replace(/[？?]/g, ''))) {
      return value
    }
  }
  
  // 默认回复
  return '这是一个很好的问题！根据当前的课程内容，我建议您可以参考课程资料第' + Math.floor(Math.random() * 10 + 1) + '章的相关内容。如果还有疑问，可以在课后向老师请教。'
}

// 学员管理方法
const muteAll = () => {
  ElMessage.info('已将所有学员设为静音')
}

const inviteSpeak = () => {
  ElMessage.info('已发送发言邀请')
}

const privateChat = (student) => {
  ElMessage.info(`正在与${student.name}私聊...`)
}

const kickStudent = (student) => {
  ElMessageBox.confirm(`确定要移除学员 ${student.name} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = students.value.findIndex(s => s.id === student.id)
    if (index > -1) {
      students.value.splice(index, 1)
      ElMessage.success(`已移除学员 ${student.name}`)
    }
  }).catch(() => {})
}

const openSocial = (platform) => {
  switch (platform) {
    case 'email':
      window.location.href = 'mailto:service@edulivelink.com'
      break
    case 'wechat':
      ElMessage.info('请扫描二维码关注我们的微信公众号')
      break
    case 'weibo':
      ElMessage.info('请关注我们的官方微博')
      break
  }
}

// 模拟弹幕生成
const generateRandomDanmaku = () => {
  const contents = [
    '老师讲得真好！',
    '这个知识点很重要',
    '有点难理解',
    '请问有课件吗？',
    '666',
    '学到了学到了',
    '老师能再讲一遍吗？',
    '感谢老师的分享',
    '这节课太棒了',
    '收获满满'
  ]
  
  const usernames = ['小明', '小红', '小张', '小李', '小王', '小陈', '小刘', '小黄']
  
  const danmaku = {
    id: Date.now() + Math.random(),
    username: usernames[Math.floor(Math.random() * usernames.length)],
    content: contents[Math.floor(Math.random() * contents.length)],
    color: danmakuColors.value[Math.floor(Math.random() * danmakuColors.value.length)],
    time: new Date(),
    top: Math.random() * 70 + 10,
    right: -500,
    duration: 8 + Math.random() * 4
  }
  
  danmakuHistory.value.unshift(danmaku)
  
  if (danmakuEnabled.value) {
    activeDanmakus.value.push(danmaku)
    
    setTimeout(() => {
      const index = activeDanmakus.value.findIndex(d => d.id === danmaku.id)
      if (index > -1) {
        activeDanmakus.value.splice(index, 1)
      }
    }, danmaku.duration * 1000)
  }
}

// 生命周期
onMounted(() => {
  // 启动直播计时器
  liveTimer = setInterval(() => {
    liveTime.value++
  }, 1000)
  
  // 启动弹幕生成器
  danmakuTimer = setInterval(() => {
    if (Math.random() < 0.3) { // 30%概率生成弹幕
      generateRandomDanmaku()
    }
  }, 3000)
})

onUnmounted(() => {
  if (liveTimer) {
    clearInterval(liveTimer)
  }
  if (danmakuTimer) {
    clearInterval(danmakuTimer)
  }
})
</script>

<style scoped>
/* 弹幕动画 */
@keyframes danmaku {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(-100%);
  }
}

.animate-danmaku {
  animation: danmaku linear;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 背景模糊效果 */
.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}
</style>